{include file="common/loadlang" /}

<div class="default-main" id="rule" v-cloak>
    <!-- 表格 -->
    <table-header
        :buttons="['refresh', 'add', 'edit', 'delete', 'unfold', 'quickSearch', 'columnDisplay']"
        :quick-search-placeholder="__('Quick search placeholder', __('title'))"
    ></table-header>

    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <table-component ref="tableRef" :pagination="false" ></table-component>
</div>
<script>
  var Rule = {
    setup() {
      const { ref,onMounted,provide } = Vue;
      const tableRef = ref(null);
      const {defaultOptButtons}= tableUtils;

      const baTable = new baTableClass(
        new baTableApi("/auth.rule/"),
        {
          expandAll: false,
          dblClickNotEditColumn: [undefined, "keepalive", "status"],
          column: [
            { type: "selection", align: "center" },
            {
              label: __("title"),
              prop: "title",
              align: "left",
              width: "200",
            },
            {
              label: __("Icon"),
              prop: "icon",
              align: "center",
              width: "60",
              render: "icon",
              default: "fa fa-circle-o",
            },
            {
              label: __("name"),
              prop: "name",
              align: "center",
              showOverflowTooltip: true,
            },
            {
              label: __("type"),
              prop: "type",
              align: "center",
              render: "tag",
              custom: { menu: "danger", menu_dir: "success", button: "info" },
              replaceValue: {
                menu: __("type menu"),
                menu_dir: __("type menu_dir"),
                button: __("type button"),
              },
            },
            {
              label: __("cache"),
              prop: "keepalive",
              align: "center",
              width: "80",
              render: "switch",
            },
            {
              label: __("State"),
              prop: "status",
              align: "center",
              width: "80",
              render: "switch",
            },
            {
              label: __("Update time"),
              prop: "update_time",
              align: "center",
              width: "160",
              render: "datetime",
            },
            {
              label: __("Operate"),
              align: "center",
              width: "130",
              render: "buttons",
              buttons: defaultOptButtons(),
            },
          ],
          dragSortLimitField: "pid",
        },
        {
          defaultItems: {
            type: "menu",
            menu_type: "tab",
            extend: "none",
            keepalive: 0,
            status: "1",
            icon: "fa fa-circle-o",
          },
        },
        {
          getIndex: () => {
            baTable.table.expandAll = baTable.table.filter?.quickSearch
              ? true
              : false;
          },
          // 获得编辑数据后
          requestEdit: () => {
            if (baTable.form.items && !baTable.form.items.icon)
              baTable.form.items.icon = "fa fa-circle-o";
          },
        }
      );

      provide("baTable", baTable);

      onMounted(() => {
        baTable.table.ref = tableRef.value;

        baTable.mount();
        baTable.getIndex()?.then(() => {
            baTable.dragSort();
        });
      });
      return {
        tableRef,
      };
    },
  };

  createVue("rule", Rule, {
    "table-header": TableHeader,
    'table-component': TableComponent,
    'com-search': ComSearch,
    'ba-input':BaInput,
    'datetime':Datetime,
    'switch':Switch,
   'icon':IconRenderer,
   'buttons':ButtonsRenderer,
  });
</script>
